<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>修改密码</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="tool/layui/css.layui.css" />
		<link rel="stylesheet" type="text/css" href="css/BE/commonality.css" />
		<link rel="stylesheet" type="text/css" href="css/BE/BE_account_pwd.css" />
	</head>

	<body>
		<header>
			<!-- 头部暂时不用写 -->
		</header>
		<section>
			<!-- 内容部分 -->
			<div class="content-wrapper">
				<div class="">
					<div class="card-body">
						<div class="pointpwd">
							修改密码
						</div>
						<hr class="line" />
						<div class="uppwd">
							<button class="btn btn-primary myBtn" data-toggle="modal" data-target="#mymodal" id="upPwd">修改密码</button>
						
						</div>
						<div class="up">
							<button class="btn btn-primary myBtn" data-toggle="modal" data-target="#updatePassByPhone" id="upByPhone">通过手机号重置密码</button>
					
							
						</div>
						<div class="text_2774X1">
							<button class="btn btn-primary myBtn" data-toggle="modal" data-target="#updatePassByEmail" id="upByEmail">通过邮箱重置密码</button>
				
							
						</div>
					</div>
			<!--修改密码-->
			<div id="updatePass">
				<div id="mymodal" class="modal fade bs-examlpe-modal-sm"><!-- modal固定布局，上下左右都是0表示充满全屏，支持移动设备上使用触摸方式进行滚动。。-->
			        <div class="modal-dialog modal-sm"><!-- modal-dialog默认相对定位，自适应宽度，大于768px时宽度600，居中-->
			            <div class="modal-content"><!-- modal-content模态框的边框、边距、背景色、阴影效果。-->
			                <div class="modal-header">
			                    <button class="close" data-dismiss="modal">&times;</button>
			                    <h4 class="modal-title">修改密码</h4>
			                </div>
			                <div class="media-body">
			                    <form action="#">
			                        <div class="col-md-10 col-md-offset-1 myMP">
			                            <span class="character">&nbsp;&nbsp;&nbsp;&nbsp;原密码：</span>  
			                            <input type="text" name="" id="oldPwd" class="form-control" placeholder="请输入原密码" />
			                        </div>
			                        <div class="col-md-10 col-md-offset-1 myMP">
			                        	<span class="character">&nbsp;&nbsp;&nbsp;&nbsp;新密码：</span>
			                            <input class="form-control" id="newPwd" name="" type="password" placeholder="请输入新密码"/>
			                        </div>
			                         <div class="col-md-10 col-md-offset-1 myMP">
			                        	<span class="character">确认密码：</span>
			                            <input class="form-control" id="confimpwd" name="" type="password" placeholder="请再次输入新密码"/>
			                        </div>
			                        <div class="col-md-10 col-md-offset-1 myMP" id="divsure">
			                            <button class="update">修改</button>
			                        </div>
			                        <div class="col-md-12 myB">
			                            <button class="not sure" onclick="closemodel()">暂不修改</button>
			                        </div>
			                    </form>
			                  </div>
			            	</div>
			            </div>    
			        </div> 
				</div>
			<!--修改密码通过手机号-->
			<div id="updatePass">
				<div id="updatePassByPhone" class="modal fade bs-examlpe-modal-sm"><!-- modal固定布局，上下左右都是0表示充满全屏，支持移动设备上使用触摸方式进行滚动。。-->
			        <div class="modal-dialog modal-sm"><!-- modal-dialog默认相对定位，自适应宽度，大于768px时宽度600，居中-->
			            <div class="modal-content"><!-- modal-content模态框的边框、边距、背景色、阴影效果。-->
			                <div class="modal-header">
			                    <button class="close" data-dismiss="modal">&times;</button>
			                    <h4 class="modal-title">通过手机号修改密码</h4>
			                </div>
			                <div class="media-body">
			                    <form action="#">
			                    	 <div class="col-md-10 col-md-offset-1 myMP">
			                            <span>当前手机号：13800138000</span>  <a href="#">发送验证码</a>
			                        </div>
			                        <div class="col-md-10 col-md-offset-1 myMP">
			                            <span class="character">&nbsp;&nbsp;&nbsp;&nbsp;验证码：</span>  
			                            <input type="text" name="" class="form-control" id="phone-code" placeholder="请输入验证码" />
			                        </div>
			                        <div class="col-md-10 col-md-offset-1 myMP">
			                        	<span class="character">&nbsp;&nbsp;&nbsp;&nbsp;新密码：</span>
			                            <input class="form-control" id="phone-newpwd" name="" type="password" placeholder="请输入新的登陆密码"/>
			                        </div>
			                         <div class="col-md-10 col-md-offset-1 myMP">
			                        	<span class="character">确认密码：</span>
			                            <input class="form-control" id="phone-confimpwd" name="" type="password" placeholder="请再次输入新密码"/>
			                        </div>
			                        <div class="col-md-10 col-md-offset-1 myMP" id="divsure">
			                            <button class="phone-update">修改</button>
			                        </div>
			                        <div class="col-md-12 myB">
			                            <button class="not sure" onclick="closemodel()">暂不修改</button>
			                        </div>
			                    </form>
			                  </div>
			            	</div>
			            </div>    
			        </div> 
				</div>
			
			<!--修改密码通过邮箱-->
			<div id="updatePass">
				<div id="updatePassByEmail" class="modal fade bs-examlpe-modal-sm"><!-- modal固定布局，上下左右都是0表示充满全屏，支持移动设备上使用触摸方式进行滚动。。-->
			        <div class="modal-dialog modal-sm"><!-- modal-dialog默认相对定位，自适应宽度，大于768px时宽度600，居中-->
			            <div class="modal-content"><!-- modal-content模态框的边框、边距、背景色、阴影效果。-->
			                <div class="modal-header">
			                    <button class="close" data-dismiss="modal">&times;</button>
			                    <h4 class="modal-title">通过邮箱修改密码</h4>
			                </div>
			                <div class="media-body">
			                    <form action="#">
									<div class="col-md-10 col-md-offset-1 myMP">
			                            <span>当前邮箱：abc1234@qq.com</span>  <a href="#">发送验证码</a>
			                        </div>
			                        <div class="col-md-10 col-md-offset-1 myMP">
			                            <span class="character">&nbsp;&nbsp;&nbsp;&nbsp;验证码：</span>  
			                                <input type="text" name="" id="email-code" class="form-control" placeholder="请输入验证码" />
			                        </div>
			                        <div class="col-md-10 col-md-offset-1 myMP">
			                        	<span class="character">&nbsp;&nbsp;&nbsp;&nbsp;新密码：</span>
			                            <input class="form-control" id="email-newpwd" name="" type="password" placeholder="请输入新的登陆密码"/>
			                        </div>
			                         <div class="col-md-10 col-md-offset-1 myMP">
			                        	<span class="character">确认密码：</span>
			                            <input class="form-control" id="email-confimpwd" name="" type="password" placeholder="请再次输入新密码"/>
			                        </div>
			                        <div class="col-md-10 col-md-offset-1 myMP" id="divsure">
			                            <button class="email-update">修改</button>
			                        </div>
			                        <div class="col-md-12 myB">
			                            <button class="not sure" onclick="closemodel()">暂不修改</button>
			                        </div>
			                    </form>
			                  </div>
			            	</div>
			            </div>    
			        </div> 
				</div>
		
						</div>
				</div>
			</div>
		</section>
		<footer>
			<!-- 尾部 -->
		</footer>
		<script type="text/javascript" src="tool/layui/layui.js" ></script>
		<link src="js/bootstrap.min.css"></link>
		<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
		<script src="js/bootstrap.js" type="text/javascript"></script>
		<script src="js/BE/BE_account_pwd.js" type="text/javascript"></script>
		<script>
			$(document).ready(function(){
				/*修改密码*/
				$(".update").click(function  () {
					var pwd=$("#newPwd").val();
					var re_password=/^[0-9a-zA-Z]{6,12}$/;
    	
					var confimpwd=$("#confimpwd").val();
    	
					if($("#oldPwd").val()==""){
						tan("请输入原密码");
					}else if($("#newPwd").val()==""){
						tan("请输入原密码");
					}
					else if(pwd==""){
						tan("请输入原密码");
					}else if(re_password.test(pwd)==false){
						tan("请输入正确格式的密码");
					}
					else if(pwd!=confimpwd){
						tan("两次密码不一致");
					}
				})
				
				/*修改密码通过手机号*/
				
				$(".phone-update").click(function  () {
					var code=$("#phone-code").val();
					var pwd=$("#phone-newpwd").val();
					var re_password=/^[0-9a-zA-Z]{6,12}$/;
					var confimpwd=$("#phone-confimpwd").val();
    	
					if(code==""){
						tan("请输入验证码");
					}
					else if(pwd==""){
						tan("请输入原密码");
					}else if(re_password.test(pwd)==false){
						tan("请输入正确格式的密码");
					}
					else if(pwd!=confimpwd){
						tan("两次密码不一致");
					}
				})
				
				/*修改密码通过邮箱*/
				
				$(".email-update").click(function  () {
					var code=$("#email-code").val();
					var pwd=$("#email-newpwd").val();
					var re_password=/^[0-9a-zA-Z]{6,12}$/;
					var confimpwd=$("#email-confimpwd").val();
    	
					if(code==""){
						tan("请输入验证码");
					}
					else if(pwd==""){
						tan("请输入原密码");
					}else if(re_password.test(pwd)==false){
						tan("请输入正确格式的密码");
					}
					else if(pwd!=confimpwd){
						tan("两次密码不一致");
					}
				})
				
				
				
			})
		
		/*关闭弹窗*/
				function closemodel () {
				$('.modal.fade.bs-examlpe-modal-sm').modal('hide');

			}
				/*弹窗提示方法*/
				function tan (mes) {
				 layui.use(['layer', 'form'], function(){
					        var layer = layui.layer,
					        form = layui.form;
					        layer.msg(mes);
			})

				
			}
	
	</script>
	</body>

</html>